<template>
  <div id="app">
    <h3>
      侦听器的使用：
    </h3>
    姓：<input type="text" v-model="lastName"><br> <!-- 双向绑定lastName -->
    名：<input type="text" v-model="firstName"><br> <!-- 双向绑定firstName -->
    您的全名是：{{ fullName }}
    <p>
      <textarea name="" id="" v-model="content">

      </textarea>
      
    </p>
    <p :class="[show]">输入了{{ s }}个字符</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "a",
      lastName: "b",
      fullName: "",
      content:'',
      s:0,
      show:''
    }
  },
  watch: {
    content:{
      handler(newval,oldval){
          this.s = newval.length;
          if(this.s>10){
            this.show = 'red'
          }
          else{
            this.show = 'green'
          }
         
      },
      // immediate:true
    },
    firstName: {
      handler: function (newVal, oldVal) {
        console.log("当前值：", newVal)
        console.log("原来的值：", oldVal)
        this.fullName = this.firstName + " " + this.lastName
      },
      immediate: true
    },
    lastName: function () {
      //watch侦听lastName，一旦lastName发生变化，触发fullname值的变化
      this.fullName = this.firstName + " " + this.lastName
    }
  }
}
</script>
<style>
.red{
 color:red;
}
.green{
  color:green;
}
</style>